<!--暂未实现-->
<template>
  <Modal title="自定义组件编辑"
         :closable="true"
         :mask-closable="false"
         :mask="false"
         :draggable="true"
         :sticky="true"
         transfer
         v-model="visible">

    <Tabs name="main_tabs" size="small" v-model="mainTabsValue">
      <TabPane name="template_tab" tab="main_tabs" label="模板">
        <CodeEditor v-model="template" :mode="'html'" :height="300"></CodeEditor>
      </TabPane>
      <TabPane name="js_tab" tab="main_tabs" label="脚本">
        <CodeEditor v-model="js" :mode="'js'" :height="300"></CodeEditor>
      </TabPane>
      <TabPane name="css_tab" tab="main_tabs" label="样式">
        <CodeEditor v-model="css" :mode="'css'" :height="300"></CodeEditor>
      </TabPane>
    </Tabs>

  </Modal>
</template>

<script>

export default {
  name: "",
  props: {
    show: {
      type: Boolean
    },
    js: {
      type: String
    },
    template: {
      type: String
    },
    css: {
      type: String
    }
  },
  data() {
    return {
      visible: this.show,
      mainTabsValue: 'template_tab',
    }
  },
  mounted() {

  },
  methods: {

    cancel() {
      this.visible = false;
      this.$emit('cancel', this.visible)
      // 可以在这里编写关闭之后的逻辑处理
    }
  },
  computed: {},
  watch: {
    show(val) {
      this.visible = val
    }
  }
}
</script>

<style lang="less" scoped>

</style>
